<template>
  <div>

	  <myheader></myheader>

	  <br /><br />

	  <Breadcrumb :datas="datas"></Breadcrumb>
	
	<section class="featured-block text-center">
		<div class="container">
            <center>

                <div>
                <tr>
                    <th>分类id&nbsp;&nbsp;</th>
                    <th>分类名称&nbsp;&nbsp;</th>
                    <th>修改</th>
                    <th>删除</th>
                </tr>
                <tr v-for="(i,index) in list" :key="index">
                    <td>{{ index+1 }}</td>
                    <td>{{ i.cname }}</td>
                    <td><Button><router-link :to="{path:'/updatecate',query:{id:i.id}}">修改</router-link></Button></td>
                    <td><Button @click="remove(i.id)">删除</Button></td>
                </tr>
            </div>

            </center>
            
            <br>

            分类添加: <input type="text" v-model="cname">
            <br><br>
            <Button @click="submit">添加</Button>

		</div>
	</section>
	
	<mufooter></mufooter>

  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
		//声明面包屑导航变量
	    datas:[{title:"首页",route:{name:'index'}},{title:'商品分类页面',route:{name:'editcategory'}}],
        cname:'',
        list:[],

    }
  },
  //定义组件
  components:{
	  'myheader':myheader,
	  'mufooter':myfooter,
	},
  mounted:function(){
      //展示
      this.look()
  
},
  methods:{


       remove(id) {
            this.axios({
                method:'DELETE',
                url:'http://127.0.0.1:8000/category/',
                data:{
                    id :id
                }
            }).then(result=>{
                alert(result.data.message)
                this.$router.go(0)
            })
        },

      //分类页面展示
      look:function(){
          this.axios.get('http://localhost:8000/category/')
          .then((result)=>{
              console.log(result);
              this.list = result.data
          })
      },

	  //提交事件
	  submit:function(){

		  //判断用户是否输入
		  if(this.cname == ""){
			  this.$Message("分类名不能为空");
			  return false;
		  }
		  //请求后台接口
		  this.axios.post('http://localhost:8000/category/',{cname:this.cname})
		  .then((result) =>{
              console.log(result);

          })

	  }
     
  }
}


</script>
 
<style>



</style>